<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="420"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Define drawing parameters
        const cx = canvas.width / 2;
        const cy = 210; // Center Y, adjusted for better layout
        const R = 150;  // Radius of the large circle
        const lineWidth = 2.5;

        // --- Draw the large circle ---
        ctx.beginPath();
        ctx.arc(cx, cy, R, 0, 2 * Math.PI);
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = 'black';
        ctx.stroke();

        // --- Draw the center dot ---
        ctx.beginPath();
        ctx.arc(cx, cy, 4, 0, 2 * Math.PI);
        ctx.fillStyle = '#333'; // Dark gray color
        ctx.fill();

        // --- Draw the text inside the circle ---
        ctx.fillStyle = 'black';
        // Using 'serif' for a closer match to the original image's font style
        ctx.font = '38px serif'; 
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        const textY = cy - R * 0.2; // Vertical position of text
        const textSpacing = 65; // Spacing between characters

        ctx.fillText('P', cx, textY);
        ctx.font = '38px KaiTi'; // A good font for Chinese characters
        ctx.fillText('尾', cx - textSpacing, textY);
        ctx.fillText('头', cx + textSpacing, textY);

        // --- Draw the device shape at the top ---
        const angleSpan = 0.4; // Half of the angular width of the device
        const startAngle = -Math.PI / 2 - angleSpan;
        const endAngle = -Math.PI / 2 + angleSpan;
        const innerRadius = R - 20;

        ctx.strokeStyle = 'black';
        ctx.lineWidth = lineWidth;

        // Inner arc
        ctx.beginPath();
        ctx.arc(cx, cy, innerRadius, startAngle, endAngle);
        ctx.stroke();

        // Left connecting line (radial)
        ctx.beginPath();
        ctx.moveTo(cx + R * Math.cos(startAngle), cy + R * Math.sin(startAngle));
        ctx.lineTo(cx + innerRadius * Math.cos(startAngle), cy + innerRadius * Math.sin(startAngle));
        ctx.stroke();

        // Right connecting line (radial)
        ctx.beginPath();
        ctx.moveTo(cx + R * Math.cos(endAngle), cy + R * Math.sin(endAngle));
        ctx.lineTo(cx + innerRadius * Math.cos(endAngle), cy + innerRadius * Math.sin(endAngle));
        ctx.stroke();
    </script>
</body>
</html>